<template>
  <div class="w-full h-[64px] flex justify-start items-center">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3">{{ titleName }}</span>
      </div>
    </div>
  </div>

  <div class="w-full pl-6 pr-6" style="height: calc(100vh - 128px); max-height: 100vh">
    <div class="">
      <div class="w-full h-10 leading-10">资产信息</div>
      <div class="w-full h-[100px] flex flex-col justify-start pl-5">
        <div class="flex-1 flex justify-start items-center">资产名称：{{ route.query.name }}</div>
        <div class="flex-1 flex justify-start items-center">资产编号：{{ route.query.code }}</div>
      </div>
      <div class="w-full h-10 leading-10">数据关系视图</div>

      <div class="w-full h-auto border border-inherit">
        <div class="flex justify-between">
          <div class="flex-1"></div>
          <div class="flex items-center">
            <div class="mr-3">当前资源</div>
            <div class="w-[150px]">
              <a-select placeholder="关联状态">
                <a-option>Beijing</a-option>
                <a-option>Shanghai</a-option>
                <a-option>Guangzhou</a-option>
              </a-select>
            </div>
          </div>
        </div>
        <div class="echarts">
          <echarts width="100%" height="100%" :data="data"> </echarts>
        </div>
      </div>

      <div class="w-full flex justify-between">
        <div></div>
        <div class="mr-5">
          <a-button type="primary" @click="goBack">返回</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { computed, onMounted } from 'vue';
const route = useRoute();
const titleName = computed(() => {
  return route.name;
});
import echarts from '@/components/echarts_allocation/EachartsView.vue';
import useEcharts from '../use_hooks/useEcharts';
const { data } = useEcharts();
/**
 * @method 底部返回
 */
const goBack = () => {
  window.history.go(-1);
};

onMounted(() => {
  // getGuanxi()
});
</script>

<style lang="less" scoped>
.echarts {
  width: calc(100vw - 270px);

  height: calc(100vh - 400px);
}
</style>
